<template>
<div class="lazy-img">
  <img ref="img" v-bind="$attrs" alt="">
</div>
</template>

<script>
export default {
  name: "mkImg",
  props:['src'],
  inheritAttrs:false,
  data(){
    return{

    }
  },
  mounted() {
    this.Observer = new IntersectionObserver(this.serverHandler)
    this.Observer.observe(this.$refs.img)
  },
  methods:{
    serverHandler(items){
      console.log('执行监听')
      items.forEach(ins=>{
        if (ins.isIntersecting){
          ins.target.src = this.src
          this.Observer.unobserve(ins.target)
        }
      })
    }
  }
}
</script>

<style scoped>

.lazy-img{
  background-color: #f4f4f4;
  display: inline-block;
  font-size: 0;
}
</style>